<template>
  <div :style="{backgroundColor: bgColor}" class="search">
    <img :src="icon" alt class="search-icon" />
    <span :style="{color: hintColor}" class="search-hint">大前端开发，混合京东商城系统</span>
  </div>
</template>

<script>
export default {
  props: {
    // 图标
    icon: {
      default: require('@img/search.svg'),
      type: String
    },
    // 字体颜色
    hintColor: {
      default: '#999999',
      type: String
    },
    // 背景颜色
    bgColor: {
      default: '#ffffff',
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
.search {
  background-color: white;
  width: 100%;
  margin: px2rem(6);
  border-radius: px2rem(22);
  display: flex;
  align-items: center;
  &-icon {
    margin-left: $marginSize;
    width: px2rem(16);
  }
  &-hint {
    margin-left: $marginSize;
    font-size: $minInfoSize;
    color: $hintColor;
  }
}
</style>
